<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{userName}}</view>
		</view>
		<view class="cu-card no-card">
			<view class="cu-item padding">
				<view class="flex justify-between padding-bottom-sm solid-bottom margin-top">
					<view class="title">业务类型</view>
					<picker mode="selector" :value="businessType" :range="busiTypeList" range-key="businessTypeName" @change="onChangeBusinessType">
						<text>{{businessTypeName}}</text>
					</picker>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">分成比例</view>
				<input placeholder="请填写分成比例" v-model="incomeRatio"></input>
				<text>%</text>
			</view>
			<view class="cu-form-group">
				<view class="title">编辑收费模版</view>
				<view><switch class="switch-func" :class="editFeeState == 2?'checked':''"
							:checked="editFeeState == 2?true:false" @change="editFeeStateChange"/></view>
			</view>
		</view>
		<view class="cu-bar btn-group margin-top">
		    <button class="cu-btn bg-grey shadow-blur round" @click="btnCancel()">取消</button>
			<button class="cu-btn bg-orange shadow-blur round" @click="btnSaveSubmit()">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:null,
				userName:'用户名称',
				businessType:null,
				businessTypeName:null,
				incomeRatio:0,
				editFeeState:1,
				
				busiTypeIndex:0,
				busiTypeList:[]
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.userId = data.userId;
				_self.userName = data.userName;
				_self.businessType = data.businessType;
				_self.businessTypeName = data.businessTypeName;
				_self.incomeRatio = data.incomeRatio;
				_self.editFeeState = data.editFeeState;
				_self._loadBusinessType();
			})
		},
		methods: {
			_loadBusinessType:function(){
				const api = this.$request;
				const _self = this;
				api.post(api.url.busiTypeRoleTypeList,{},res=>{
					console.log(res)
					if(res.code==200){
						_self.busiTypeList = res.body.items;
						if(!_self.businessType){
							_self.businessType = _self.busiTypeList[_self.busiTypeIndex].businessType;
							_self.businessTypeName = _self.busiTypeList[_self.busiTypeIndex].businessTypeName;
						}
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						});
					}
				})
			},
			onChangeBusinessType:function(e){
				console.log(e);
				this.busiTypeIndex = e.detail.value;
				this.businessType = this.busiTypeList[this.busiTypeIndex].businessType;
				this.businessTypeName = this.busiTypeList[this.busiTypeIndex].businessTypeName;
			},
			editFeeStateChange:function(e){
				console.log(e);
				var state = 1;
				if(e.detail.value){
					state = 2;
				}
				this.editFeeState = state;
			},
			btnCancel:function(){
				uni.navigateBack();
			},
			btnSaveSubmit:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要保存该业务配置吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.teamSaveBusiConfig,{
								userId:_self.userId,
								businessType:_self.businessType,
								incomeRatio:_self.incomeRatio,
								editFeeState:_self.editFeeState
							},res=>{
								console.log(res)
								if(res.code==200){
									uni.showToast({
										title:'操作成功',
										icon:'success'
									});
									setTimeout(function(){
										uni.navigateBack();
									},1000)
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}
.container .cu-form-group input{text-align:right;}
.container .cu-item{padding-bottom:0;}
.container .cu-item .title{font-size:30rpx;}
</style>
